<template>
  <el-card class="box-card">
    <div class="card-title">
      <span>{{ card_title }}</span>
      <el-button
        type="text"
        class="iconfont iconrefresh card-title-refresh"
      ></el-button>
    </div>
    <template v-if="card_icon">
      <div class="card-icon">
        <img style="width: 200px;max-width:100%" :src="require('@/assets/home_page/' + card_icon)" />
      </div>
    </template>
    <div class="card-content">
      <div
        v-for="o in card_data"
        :key="o"
        class="text item"
      >
        {{ o }}
      </div>
    </div>
  </el-card>
</template>
<style scoped>
.card-title-refresh {
  text-align: center;
  font-size: 20px;
  padding: 0
}
.box-card {
  padding: 0;
  line-height: 20px;
  width: 100%;
  height: 100%;
  text-align: left;
  border-radius: 10px;
}
.card-title {
  position: relative;
  text-align: left;
  font-size: 30px;
  color: #676668;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* 让鼠标不能选中 */
  user-select: none;
}
.card-icon {
  margin-top: 15px;
  text-align: center;
}
.card-content {
  margin-top: 15px;
  font-size: 14px;
}
.text {
  color: #c9c9c9;
  /* 让鼠标不能选中 */
  user-select: none;
}
.iconrefresh {
  float: right;
}
</style>
<script>
export default {
  props: {
    'card_title': String,
    'card_data': Array,
    'card_icon': String
  },
  data () {
    return {

    }
  },
  mounted () {
    // console.log(this.card_data, this.card_title)
  }
}
</script>

